iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
自我挑戰組

UI/UX 新手30天的自學實錄系列 第 22

Figma實作(16) - html解析 首頁

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20241014/20169329GarunEJdHE.png
這部分設定了背景圖片以及畫面上的字體呈現

https://ithelp.ithome.com.tw/upload/images/20241014/2016932971aWPBvQbn.png

<div class="home">
<div class="home-1">
<div class="home__content container-xs">

使用div容器進行各區域的劃分

<div class="header__navigation">
<p class="header__navigation-item--home ui text size-textlg">Home</p>

顯示了導航選項 "Home"及其字形樣式

<div class="header__navigation-item--settings">
<button class="header__icon-button--settings ui button white_a700 size-md outline round">

顯示了另一個導航項目及按鈕,其中描述字體顏色為白色、大小中等、有描邊以及形狀圓形

<p class="home__title ui text size-text2xl">Welcome</p>

顯示標題為Welcome,並且大小為2倍的標準尺寸

<button class="home__button ui button white_a700 size-xl outline">Join us</button>

顯示文字為Join us的首頁按鈕,顏色為白色、有描邊、尺寸XL


上一篇
Figma實作(15) - 程式碼導出
下一篇
Figma實作(17) - html解析 登入頁
系列文
UI/UX 新手30天的自學實錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言